<template>
	<view class="page">
		<view class="flex-col section">
			<view class="flex-row justify-between items-center group_3">
				<text class="font_2">公司头像</text>
				<view class="flex-row items-center space-x-11">
					<image class="image_4" mode="aspectFill" :src="userInfo.image" />
				</view>
			</view>
			<view class="flex-col">
				<view class="flex-row justify-between group_4">
					<text class="font_2">公司名称</text>
					<text class="font_3 text_3">{{userInfo.company_name}}</text>
				</view>
				<view class="flex-row justify-between items-center group_5">
					<text class="font_2 text_4">联系方式</text>
					<text class="font_3 text_5">{{userInfo.mobile}}</text>
				</view>
				<view class="flex-col">
					<view class="flex-row justify-between group_6">
						<text class="font_2">公司地址</text>
						<text class="font_3">山大路南150米交汇</text>
					</view>
					<view class="flex-row justify-between group_3">
						<text class="font_2">银行卡</text>
						<view class="flex-row items-center space-x-16"><text class="font_3">已绑定</text></view>
					</view>
					<view class="flex-row justify-between items-center group_7" @click="previewImg(userInfo.company_image)">
						<text class="font_2 text_6">营业执照</text>
						<image
							class="image_6"
							mode="aspectFill"
							:src="userInfo.company_image"
						/>
					</view>
				</view>
			</view>
		</view>
		<view class="self-center group_8" @click="navTo('/pages/center/kefu')">
			<text class="font_1 text_7">如需更改资料请</text>
			<text class="font_1 text_8">联系客服</text>
		</view>
	</view>
</template>

<script lang="ts">
import {
	reactive,
	toRefs,
	defineComponent,
	ref
	// watchEffect,
} from 'vue';
// import {onLoad,onPullDownRefresh} from "@dcloudio/uni-app";
const info = defineComponent({
	components: {},
	props: {},
	setup(props: any, ctx: any) {
		const data = reactive({});
		// watchEffect(()=>{
		// })
		const previewImg = (url)=> {
			const urls = [url];
			uni.$tools.previewImg(urls);
		}
		return {
			...toRefs(data),
			previewImg,
		};
	}
});
export default info;
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.page {
	padding: 30rpx;
}
.section {
	background-color: #ffffff;
	border-radius: 10rpx;
	.group_3 {
		padding: 40rpx 30rpx;
		border-bottom: solid 2rpx #0000000f;
		.space-x-11 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 11rpx;
			}
			.image_4 {
				width: 67rpx;
				height: 68rpx;
			}
		}
		.space-x-16 {
			& > view:not(:first-child),
			& > text:not(:first-child),
			& > image:not(:first-child) {
				margin-left: 16rpx;
			}
		}
		.image_5 {
			width: 10rpx;
			height: 20rpx;
		}
	}
	.group_4 {
		padding: 40rpx 25rpx 40rpx 30rpx;
		border-bottom: solid 2rpx #0000000f;
	}
	.font_2 {
		font-size: 28rpx;
		font-family: PingFang;
		color: #333333;
	}
	.group_5 {
		padding: 40rpx 21rpx 40rpx 30rpx;
		border-bottom: solid 2rpx #0000000f;
	}
	.font_3 {
		font-size: 28rpx;
		font-family: PingFang;
		color: #999999;
	}
	.group_6 {
		padding: 40rpx 22rpx 40rpx 30rpx;
		border-bottom: solid 2rpx #0000000f;
	}
	.group_7 {
		padding: 40rpx 30rpx;
		.image_6 {
			width: 70rpx;
			height: 82rpx;
		}
	}
}

.space-y-47 {
	& > view:not(:first-child),
	& > text:not(:first-child),
	& > image:not(:first-child) {
		margin-top: 47rpx;
	}
}
.group_8 {
	margin-top: 48rpx;
	text-align: center;
	.font_1 {
		font-size: 24rpx;
		font-family: PingFang;
	}
	.text_7 {
		color: #999999;
	}
	.text_8 {
		color: #256ae5;
	}
}
</style>
